<template>
    <div class='tab1-budget'>
        <div class='tab-item tab-item-title'>Pour quel budget</div>
        <div class='tab-item tab-item-content'>
            <v-range-slider
                dense
                v-model='budgetData.range'
                :max='budgetData.max'
                :min='budgetData.min'
                class='align-center'
                :thumb-label='"always"'
                :thumb-size='40'
            ></v-range-slider>
            <div class='num-view'>
                <span class='num-view-min'>{{(budgetData.range[0] || 0) + (budgetData.unit || '' )}}</span>
                <span class='num-view-max'>{{(budgetData.range[1] || 0) + (budgetData.unit || '' )}}</span>
            </div>
        </div>
    </div>
</template>


<script>
import { mapState, mapMutations } from 'vuex';

function setUnit(el, sum) {
    el.textContent = sum;
}
function filterFinancialUnit(str, unit = ' ') {
    return str.toString().replace(/(\d)(?=(\d{3})+$)/g, $ => $ + unit);
}
export default {
    filters: {},
    data() {
        return {
            minEl: null,
            maxEl: null,
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        ...mapMutations({
            commitInit: 'searchData/commitInit',
            commitTypeData: 'searchData/commitTypeData',
        }),
        init() {
            const data = this.budgetData;
            const el = document.querySelector('.tab1-budget').querySelectorAll('.v-slider__thumb-container[role="slider"]');
            this.minEl = el[0].querySelector('.v-slider__thumb-label span');
            this.maxEl = el[1].querySelector('.v-slider__thumb-label span');
            setUnit(this.minEl, filterFinancialUnit(data.range[0]) + data.unit);
            setUnit(this.maxEl, filterFinancialUnit(data.range[1]) + data.unit);
            this.minEl.style.fontSize = this.maxEl.style.fontSize = '10px';
        },
    },
    computed: {
        ...mapState({
            budgetInit: state => state.searchData.budgetInit,
            budgetData: state => state.searchData.budgetData,
        }),
    },
    watch: {
        'budgetData.range'() {
            const data = this.budgetData;
            let init = true;
            if (this.budgetData.range[0] !== this.budgetData.min || this.budgetData.range[1] !== this.budgetData.max) {
                init = false;
            }
            this.commitInit({ k: 'budgetInit', v: init });
            this.commitTypeData({
                k: 'budgetData',
                data: {
                    range: this.budgetData.range,
                },
            });
            setUnit(this.minEl, filterFinancialUnit(data.range[0]) + data.unit);
            setUnit(this.maxEl, filterFinancialUnit(data.range[1]) + data.unit);
        },
    },
};
</script>


<style lang="scss" scoped>
//
</style>
